<template>
  <div class="app-container">
    <ResizePanel>

      <div slot="left" class="box-card" style="height: 100%;">
        <el-card shadow="never" style="width: 100%;height: 100%;">
          <div slot="header" class="clearfix ">
            <div class="flex">
              <span class="ml10">部门：</span>
              <el-input v-model="dept_name" suffix-icon="el-icon-search" class="mr10" style="flex: 1;"></el-input>
            </div>
          </div>
          <div>
          </div>
          <el-tree class="tree-border" :data="deptOptions" default-expand-all ref="tree" node-key="dept_id"
            empty-text="无分类" :props="defaultProps" @node-click="handleNodeClick" :highlight-current="true"
            :expand-on-click-node="false">

          </el-tree>
        </el-card>

      </div>

      <div slot="right" style="height: 100%;">
        <div class=" flex-column" style="height: 100%;">
          <div class="flex-between mt5 mb5">
            <div>

            </div>
            <div>
              <el-button type="primary" @click="newUser">新增</el-button>
              <el-button type="primary" :disabled="getindex==-1" @click="EditUser">编辑</el-button>
              <el-button type="primary" :disabled="getindex==-1" @click="handleDelete">删除</el-button>
            </div>
          </div>
          <div style="flex: 1;overflow: auto;">
            <el-table :data="userList" border stripe @row-click="getrow" height="100%"
              :row-class-name="tableRowClassName" highlight-current-row>
              <el-table-column label="序号" width="60" header-align="center" align="center" show-overflow-tooltip>
                <template scope="scope">
                  <span>{{ (currentpage - 1) * pagesize + scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column label="归属部门" prop="dept_name" width="100" header-align="center" show-overflow-tooltip />
              <el-table-column label="用户名称" prop="user_name" width="100" header-align="center" show-overflow-tooltip />
              <el-table-column label="用户昵称" prop="nick_name" width="100" header-align="center" show-overflow-tooltip />
              <el-table-column label="性别" width="60" header-align="center" prop="sex" show-overflow-tooltip>
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex" />
                </template>
              </el-table-column>
              <el-table-column label="手机号码" width="120" header-align="center" prop="phonenumber"
                show-overflow-tooltip />
              <el-table-column label="岗位" width="100" header-align="center" prop="post_name" show-overflow-tooltip />
              <el-table-column label="角色" min-width="100" header-align="center" prop="role_name"
                show-overflow-tooltip />
              <el-table-column label="状态" align="center" prop="status" width="70">
                <template slot-scope="scope">
                  <el-switch v-model="scope.row.status" active-value="0" inactive-value="1"
                    @change="handleStatusChange(scope.row)"></el-switch>
                </template>
              </el-table-column>
              <el-table-column label="创建时间" align="center" prop="create_time" width="160">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.create_time) }}</span>
                </template>
              </el-table-column>

            </el-table>
          </div>
          <div class="mb20">
            <pagination v-show="total > 0" :total="total" :page.sync="currentpage" :limit.sync="pagesize"
              @pagination="getList" />
          </div>
        </div>

      </div>

    </ResizePanel>
    <edit :dialogedit.sync="dialogedit" :user_id="user_id" :deptOptions="deptOptions" @reload="getList" />
  </div>
</template>

<script>
  import {
    listDept
  } from '@/api/system/dept';
  import {
    listUser,
    delUser,
    changeUserStatus
  } from '@/api/system/user';
  import '@/assets/styles/tree.scss'
  import edit from './edit';
  export default {
    name: "User",
    components: {
      edit
    },
    dicts: ['sys_normal_disable', 'sys_user_sex'],
    data() {
      return {
        cheight: 100,
        total: 0,
        currentpage: 1,
        pagesize: 100,
        // 岗位表格数据
        deptOptions: [],
        dept_name: '',
        userList: [],
        tableheight: 400,
        defaultProps: {
          children: "children",
          label: "dept_name"
        },
        // 查询参数
        queryParams: {
          ancestors: ""
        },
        getindex: -1,
        user_id: '',
        dialogedit: false
      };
    },
    created() {
      this.getDept();
      // this.getList();
    },
    mounted() {

    },
    watch: {
      // 根据名称筛选部门树
      dept_name(val) {
        this.$refs.tree.filter(val);
      }
    },
    methods: {
      // 筛选节点
      filterNode(value, data) {

        if (!value) return true;
        return data.dept_name.indexOf(value) !== -1;
      },
      // 部门
      handleNodeClick(data) {
        this.queryParams.dept_id = data.dept_id;
        this.currentpage = 1;
        this.getList();
      },
      // 角色状态修改
      handleStatusChange(row) {
        let text = row.status === "0" ? "启用" : "停用";
        this.$modal.confirm('确认要"' + text + '""' + row.nick_name + '"用户吗？').then(function() {
          var Params = {
            user_id: row.user_id,
            status: row.status,
          }
          return changeUserStatus(Params);
        }).then(() => {
          this.$modal.msgSuccess(text + "成功");
        }).catch(function() {
          row.status = row.status === "0" ? "1" : "0";
        });
      },
      filterdept() {

      },
      /** 获取部门列表 */
      getDept() {
        listDept().then(response => {
          this.deptOptions = this.handleTree(response.rows, "dept_id", "parent_id");

          this.$nextTick(() => {
            if (this.deptOptions.length > 0) {
              this.$refs.tree.setCurrentKey(this.deptOptions[0].dept_id)
              this.handleNodeClick(this.deptOptions[0]);
            }
          });

        });
      },
      /** 删除按钮操作 */
      handleDelete() {
        if (this.getindex >= 0) {
          let row = this.userList[this.getindex];
          const nick_name = row.nick_name;
          var Params = {
            user_id: row.user_id
          }
          this.$modal
            .confirm(`是否确认删除?用户昵称:${nick_name}？`)
            .then(function() {
              return delUser(Params);
            })
            .then(() => {
              this.getList();
              this.$modal.msgSuccess('删除成功');
            })
            .catch(() => {});
        }

      },
      /** 修改用户列表 */
      EditUser() {
        if (this.getindex >= 0) {
          let row = this.userList[this.getindex];
          this.user_id = row.user_id;
          this.dialogedit = true;
        }
      },
      /** 新增用户列表 */
      newUser() {
        this.user_id = '';
        this.dialogedit = true;
      },
      /** 查询岗位列表 */
      getList() {
        this.getindex = -1;
        var params = {
          page: this.currentpage,
          pagesize: this.pagesize
        }
        params = this.ObjParams(this.queryParams, params);
        listUser(params).then(response => {
          this.userList = response.rows;
          this.total = parseInt(response.total);
        });
      },

      tableRowClassName({
        row,
        rowIndex
      }) {
        row.index = rowIndex;
      },
      getrow(row) {
        this.getindex = row.index;
      },
      settableheiht() {
        var clientHeight = document.body.clientHeight;
        this.cheight = clientHeight - 84;
      }
    }
  };
</script>
<style scoped lang="scss">

</style>